<!DOCTYPE html>
<html lang="en">
<head>

   <meta name="viewport" content="width=device-width, initial-scale=1">

    <style class="cp-pen-styles">

    * {margin: 0; padding: 0;}

    a {text-decoration: none;}

    /* This class is added on scroll */
    .fixed {
        position: fixed;
        top: 0;
        height: 70px;
        z-index: 1;
    }
    body {
        color: #fff;
        font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;
        font-size: 18px;
        text-align: center;
    }
    /* Navigation Settings */
    nav {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 70px;
        background: #fff;
    }
    nav li {
        display: inline-block;
        padding: 24px 10px;
    }
    nav li a {
        color: #757575;
        text-transform: uppercase;
    }
    section {
        height: 100vh;
    }

    /* Screens Settings */
    #screen1 {
        background: #43b29d;
    }
    #screen1 p {
        padding-top: 200px;
    }
    #screen2 {
        background: #efc94d;
    }
    #screen3 {
        background: #e1793d;
    }

    @media only screen and (max-width: 520px) {
        nav li {
            padding: 24px 4px;
        }
        nav li a {
            font-size: 14px;
        }
    }
    </style>
</head>
<body>
<section id="screen1">
    <p>Scroll down</p>
    <nav class="">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

</section>

<section id="screen2"></section>
<section id="screen3"></section>

    <script src="../scripts/jquery/2.1.3/jquery.js"></script>
    <script>
        $(document).ready(function(){
            $(window).bind('scroll', function() {
                var navHeight = $( window ).height() - 70;
                if ($(window).scrollTop() > navHeight) {
                    $('nav').addClass('fixed');
                }
                else {
                    $('nav').removeClass('fixed');
                }
            });
        });
    </script>
</body>
</html>